<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <title>主题文档 - 内容 - Xzap&#39;s 缓存区</title><meta name="Description" content="了解如何在 LoveIt 主题中快速, 直观地创建和组织内容."><meta property="og:title" content="主题文档 - 内容" />
<meta property="og:description" content="了解如何在 LoveIt 主题中快速, 直观地创建和组织内容." />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://xzap.gitee.io/docs/theme-documentation/theme-documentation-content/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2020-03-05T16:30:05+08:00" />
<meta property="article:modified_time" content="2020-03-05T16:30:05+08:00" /><meta property="og:site_name" content="Xzap&#39;s 缓存区" />

<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="主题文档 - 内容"/>
<meta name="twitter:description" content="了解如何在 LoveIt 主题中快速, 直观地创建和组织内容."/>
<meta name="application-name" content="Xzap&#39;s 缓存区">
<meta name="apple-mobile-web-app-title" content="Xzap&#39;s 缓存区"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="http://xzap.gitee.io/docs/theme-documentation/theme-documentation-content/" /><link rel="prev" href="http://xzap.gitee.io/docs/theme-documentation/theme-documentation-built-in-shortcodes/" /><link rel="next" href="http://xzap.gitee.io/docs/theme-documentation/theme-documentation-basics/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "主题文档 - 内容",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "http:\/\/xzap.gitee.io\/docs\/theme-documentation\/theme-documentation-content\/"
        },"genre": "docs","keywords": "content, Markdown","wordcount":  2736 ,
        "url": "http:\/\/xzap.gitee.io\/docs\/theme-documentation\/theme-documentation-content\/","datePublished": "2020-03-05T16:30:05+08:00","dateModified": "2020-03-05T16:30:05+08:00","publisher": {
            "@type": "Organization",
            "name": ""},"author": {
                "@type": "Person",
                "name": "Dillon"
            },"description": "了解如何在 LoveIt 主题中快速, 直观地创建和组织内容."
    }
    </script></head>
    <body data-header-desktop="fixed" data-header-mobile="auto"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/" title="Xzap&#39;s 缓存区">Xzap&#39;s 缓存区</a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/posts/"> 文章 </a><a class="menu-item" href="/tags/"> 标签 </a><a class="menu-item" href="/categories/"> 分类 </a><a class="menu-item" href="/docs/"> 文档 </a><span class="menu-item delimiter"></span><span class="menu-item search" id="search-desktop">
                        <input type="text" placeholder="搜索文章标题或内容..." id="search-input-desktop">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-desktop" title="搜索">
                            <i class="fas fa-search fa-fw" aria-hidden="true"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-desktop" title="清空">
                            <i class="fas fa-times-circle fa-fw" aria-hidden="true"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-desktop">
                            <i class="fas fa-spinner fa-fw fa-spin" aria-hidden="true"></i>
                        </span>
                    </span><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                    <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="Xzap&#39;s 缓存区">Xzap&#39;s 缓存区</a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><div class="search-wrapper">
                    <div class="search mobile" id="search-mobile">
                        <input type="text" placeholder="搜索文章标题或内容..." id="search-input-mobile">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-mobile" title="搜索">
                            <i class="fas fa-search fa-fw" aria-hidden="true"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-mobile" title="清空">
                            <i class="fas fa-times-circle fa-fw" aria-hidden="true"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-mobile">
                            <i class="fas fa-spinner fa-fw fa-spin" aria-hidden="true"></i>
                        </span>
                    </div>
                    <a href="javascript:void(0);" class="search-cancel" id="search-cancel-mobile">
                        取消
                    </a>
                </div><a class="menu-item" href="/posts/" title="">文章</a><a class="menu-item" href="/tags/" title="">标签</a><a class="menu-item" href="/categories/" title="">分类</a><a class="menu-item" href="/docs/" title="">文档</a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
            </a></div>
    </div>
</header><div class="search-dropdown desktop">
        <div id="search-dropdown-desktop"></div>
    </div>
    <div class="search-dropdown mobile">
        <div id="search-dropdown-mobile"></div>
    </div><main class="main">
                <div class="container"><div class="page single special"><h1 class="single-title animate__animated animate__pulse animate__faster">主题文档 - 内容</h1><div class="content" id="content"><p>了解如何在 <strong>LoveIt</strong> 主题中快速, 直观地创建和组织内容.</p>
<h2 id="contents-organization">1 内容组织</h2>
<p>以下是一些方便你清晰管理和生成文章的目录结构建议:</p>
<ul>
<li>保持博客文章存放在 <code>content/posts</code> 目录, 例如: <code>content/posts/我的第一篇文章.md</code></li>
<li>保持简单的静态页面存放在 <code>content</code> 目录, 例如: <code>content/about.md</code></li>
<li>本地资源组织</li>
</ul>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw" aria-hidden="true"></i>本地资源引用<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><p><!-- raw HTML omitted --><!-- raw HTML omitted --><!-- raw HTML omitted --></p>
<p>有三种方法来引用<strong>图片</strong>和<strong>音乐</strong>等本地资源:</p>
<ol>
<li>使用<a href="https://gohugo.io/content-management/page-bundles/" target="_blank" rel="noopener noreffer">页面包</a>
中的<a href="https://gohugo.io/content-management/page-resources/" target="_blank" rel="noopener noreffer">页面资源</a>
.
你可以使用适用于 <code>Resources.GetMatch</code> 的值或者直接使用相对于当前页面目录的文件路径来引用页面资源.</li>
<li>将本地资源放在 <strong>assets</strong> 目录中, 默认路径是 <code>/assets</code>.
引用资源的文件路径是相对于 assets 目录的.</li>
<li>将本地资源放在 <strong>static</strong> 目录中, 默认路径是 <code>/static</code>.
引用资源的文件路径是相对于 static 目录的.</li>
</ol>
<p>引用的<strong>优先级</strong>符合以上的顺序.</p>
<p>在这个主题中的很多地方可以使用上面的本地资源引用,
例如 <strong>链接</strong>, <strong>图片</strong>, <code>image</code> shortcode, <code>music</code> shortcode 和<strong>前置参数</strong>中的部分参数.</p>
<p>页面资源或者 <strong>assets</strong> 目录中的<a href="https://gohugo.io/content-management/image-processing/" target="_blank" rel="noopener noreffer">图片处理</a>
会在未来的版本中得到支持.
非常酷的功能! <i class="far fa-grin-squint fa-fw" aria-hidden="true"></i></p>
</div>
        </div>
    </div>
<h2 id="front-matter">2 前置参数</h2>
<p><strong>Hugo</strong> 允许你在文章内容前面添加 <code>yaml</code>, <code>toml</code> 或者 <code>json</code> 格式的前置参数.</p>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw" aria-hidden="true"></i>注意<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><strong>不是所有</strong>的以下前置参数都必须在你的每篇文章中设置.
只有在文章的参数和你的 <a href="../theme-documentation-basics#site-configuration" rel="">网站设置</a>
 中的 <code>page</code> 部分不一致时才有必要这么做.</div>
        </div>
    </div>
<p>这是一个前置参数例子:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;我的第一篇文章&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">subtitle</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">date</span><span class="p">:</span><span class="w"> </span><span class="ld">2020-03-04T15:58:26</span><span class="m">+08</span><span class="p">:</span><span class="m">00</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">lastmod</span><span class="p">:</span><span class="w"> </span><span class="ld">2020-03-04T15:58:26</span><span class="m">+08</span><span class="p">:</span><span class="m">00</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">draft</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">author</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">authorLink</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">description</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">license</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">images</span><span class="p">:</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">tags</span><span class="p">:</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">categories</span><span class="p">:</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">featuredImage</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">featuredImagePreview</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">hiddenFromHomePage</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">hiddenFromSearch</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">twemoji</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">lightgallery</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">ruby</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">fraction</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">fontawesome</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">linkToMarkdown</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">rssFullText</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">toc</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">enable</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">auto</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">code</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">copy</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="c"># ...</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">math</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">enable</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="c"># ...</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">mapbox</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">accessToken</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="c"># ...</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">share</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">enable</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="c"># ...</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">comment</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">enable</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="c"># ...</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">library</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">css</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c"># someCSS = &#34;some.css&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c"># 位于 &#34;assets/&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c"># 或者</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c"># someCSS = &#34;https://cdn.example.com/some.css&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">js</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c"># someJS = &#34;some.js&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c"># 位于 &#34;assets/&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c"># 或者</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c"># someJS = &#34;https://cdn.example.com/some.js&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">seo</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">images</span><span class="p">:</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="c"># ...</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><ul>
<li>
<p><strong>title</strong>: 文章标题.</p>
</li>
<li>
<p><strong>subtitle</strong>: <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.min.svg"
        data-srcset="/svg/version/0.2.0-new.min.svg, /svg/version/0.2.0-new.min.svg 1.5x, /svg/version/0.2.0-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.0"
        title="LoveIt 新增 | 0.2.0" /></a> 文章副标题.</p>
</li>
<li>
<p><strong>date</strong>: 这篇文章创建的日期时间. 它通常是从文章的前置参数中的 <code>date</code> 字段获取的, 但是也可以在 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中设置.</p>
</li>
<li>
<p><strong>lastmod</strong>: 上次修改内容的日期时间.</p>
</li>
<li>
<p><strong>draft</strong>: 如果设为 <code>true</code>, 除非 <code>hugo</code> 命令使用了 <code>--buildDrafts</code>/<code>-D</code> 参数, 这篇文章不会被渲染.</p>
</li>
<li>
<p><strong>author</strong>: 文章作者.</p>
</li>
<li>
<p><strong>authorLink</strong>: 文章作者的链接.</p>
</li>
<li>
<p><strong>description</strong>: 文章内容的描述.</p>
</li>
<li>
<p><strong>license</strong>: 这篇文章特殊的许可.</p>
</li>
<li>
<p><strong>images</strong>: 页面图片, 用于 Open Graph 和 Twitter Cards.</p>
</li>
<li>
<p><strong>tags</strong>: 文章的标签.</p>
</li>
<li>
<p><strong>categories</strong>: 文章所属的类别.</p>
</li>
<li>
<p><strong>featuredImage</strong>: 文章的特色图片.</p>
</li>
<li>
<p><strong>featuredImagePreview</strong>: 用在主页预览的文章特色图片.</p>
</li>
<li>
<p><strong>hiddenFromHomePage</strong>: 如果设为 <code>true</code>, 这篇文章将不会显示在主页上.</p>
</li>
<li>
<p><strong>hiddenFromSearch</strong>: <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.min.svg"
        data-srcset="/svg/version/0.2.0-new.min.svg, /svg/version/0.2.0-new.min.svg 1.5x, /svg/version/0.2.0-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.0"
        title="LoveIt 新增 | 0.2.0" /></a> 如果设为 <code>true</code>, 这篇文章将不会显示在搜索结果中.</p>
</li>
<li>
<p><strong>twemoji</strong>: <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.min.svg"
        data-srcset="/svg/version/0.2.0-new.min.svg, /svg/version/0.2.0-new.min.svg 1.5x, /svg/version/0.2.0-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.0"
        title="LoveIt 新增 | 0.2.0" /></a> 如果设为 <code>true</code>, 这篇文章会使用 twemoji.</p>
</li>
<li>
<p><strong>lightgallery</strong>: 如果设为 <code>true</code>, 文章中的图片将可以按照画廊形式呈现.</p>
</li>
<li>
<p><strong>ruby</strong>: <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.min.svg"
        data-srcset="/svg/version/0.2.0-new.min.svg, /svg/version/0.2.0-new.min.svg 1.5x, /svg/version/0.2.0-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.0"
        title="LoveIt 新增 | 0.2.0" /></a> 如果设为 <code>true</code>, 这篇文章会使用 <a href="#ruby" rel="">上标注释扩展语法</a>
.</p>
</li>
<li>
<p><strong>fraction</strong>: <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.min.svg"
        data-srcset="/svg/version/0.2.0-new.min.svg, /svg/version/0.2.0-new.min.svg 1.5x, /svg/version/0.2.0-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.0"
        title="LoveIt 新增 | 0.2.0" /></a> 如果设为 <code>true</code>, 这篇文章会使用 <a href="#fraction" rel="">分数扩展语法</a>
.</p>
</li>
<li>
<p><strong>fontawesome</strong>: <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.min.svg"
        data-srcset="/svg/version/0.2.0-new.min.svg, /svg/version/0.2.0-new.min.svg 1.5x, /svg/version/0.2.0-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.0"
        title="LoveIt 新增 | 0.2.0" /></a> 如果设为 <code>true</code>, 这篇文章会使用 <a href="#fontawesome" rel="">Font Awesome 扩展语法</a>
.</p>
</li>
<li>
<p><strong>linkToMarkdown</strong>: 如果设为 <code>true</code>, 内容的页脚将显示指向原始 Markdown 文件的链接.</p>
</li>
<li>
<p><strong>rssFullText</strong>: <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.4" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.4-new.min.svg"
        data-srcset="/svg/version/0.2.4-new.min.svg, /svg/version/0.2.4-new.min.svg 1.5x, /svg/version/0.2.4-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.4"
        title="LoveIt 新增 | 0.2.4" /></a> 如果设为 <code>true</code>, 在 RSS 中将会显示全文内容.</p>
</li>
<li>
<p><strong>toc</strong>: <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.9" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.9-changed.min.svg"
        data-srcset="/svg/version/0.2.9-changed.min.svg, /svg/version/0.2.9-changed.min.svg 1.5x, /svg/version/0.2.9-changed.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 更改 | 0.2.9"
        title="LoveIt 更改 | 0.2.9" /></a> 和 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中的 <code>params.page.toc</code> 部分相同.</p>
</li>
<li>
<p><strong>code</strong>: <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.min.svg"
        data-srcset="/svg/version/0.2.0-new.min.svg, /svg/version/0.2.0-new.min.svg 1.5x, /svg/version/0.2.0-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.0"
        title="LoveIt 新增 | 0.2.0" /></a> 和 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中的 <code>params.page.code</code> 部分相同.</p>
</li>
<li>
<p><strong>math</strong>: <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-changed.min.svg"
        data-srcset="/svg/version/0.2.0-changed.min.svg, /svg/version/0.2.0-changed.min.svg 1.5x, /svg/version/0.2.0-changed.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 更改 | 0.2.0"
        title="LoveIt 更改 | 0.2.0" /></a> 和 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中的 <code>params.page.math</code> 部分相同.</p>
</li>
<li>
<p><strong>mapbox</strong>: <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.min.svg"
        data-srcset="/svg/version/0.2.0-new.min.svg, /svg/version/0.2.0-new.min.svg 1.5x, /svg/version/0.2.0-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.0"
        title="LoveIt 新增 | 0.2.0" /></a> 和 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中的 <code>params.page.mapbox</code> 部分相同.</p>
</li>
<li>
<p><strong>share</strong>: 和 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中的 <code>params.page.share</code> 部分相同.</p>
</li>
<li>
<p><strong>comment</strong>: <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-changed.min.svg"
        data-srcset="/svg/version/0.2.0-changed.min.svg, /svg/version/0.2.0-changed.min.svg 1.5x, /svg/version/0.2.0-changed.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 更改 | 0.2.0"
        title="LoveIt 更改 | 0.2.0" /></a> 和 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中的 <code>params.page.comment</code> 部分相同.</p>
</li>
<li>
<p><strong>library</strong>: <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.7" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.7-new.min.svg"
        data-srcset="/svg/version/0.2.7-new.min.svg, /svg/version/0.2.7-new.min.svg 1.5x, /svg/version/0.2.7-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.7"
        title="LoveIt 新增 | 0.2.7" /></a> 和 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中的 <code>params.page.library</code> 部分相同.</p>
</li>
<li>
<p><strong>seo</strong>: <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.10" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.10-new.min.svg"
        data-srcset="/svg/version/0.2.10-new.min.svg, /svg/version/0.2.10-new.min.svg 1.5x, /svg/version/0.2.10-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.10"
        title="LoveIt 新增 | 0.2.10" /></a> 和 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中的 <code>params.page.seo</code> 部分相同.</p>
</li>
</ul>
<div class="details admonition tip open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw" aria-hidden="true"></i>技巧<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><p><!-- raw HTML omitted --><!-- raw HTML omitted --><!-- raw HTML omitted --></p>
<p><strong>featuredImage</strong> 和 <strong>featuredImagePreview</strong> 支持<a href="#contents-organization" rel="">本地资源引用</a>
的完整用法.</p>
<p>如果带有在前置参数中设置了 <code>name: featured-image</code> 或 <code>name: featured-image-preview</code> 属性的页面资源,
没有必要在设置 <code>featuredImage</code> 或 <code>featuredImagePreview</code>:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">resources</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">featured-image</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">src</span><span class="p">:</span><span class="w"> </span><span class="l">featured-image.jpg</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">featured-image-preview</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">src</span><span class="p">:</span><span class="w"> </span><span class="l">featured-image-preview.jpg</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div></div>
        </div>
    </div>
<h2 id="3-内容摘要">3 内容摘要</h2>
<p><strong>LoveIt</strong> 主题使用内容摘要在主页中显示大致文章信息。Hugo 支持生成文章的摘要.</p>
<p><figure><a class="lightgallery" href="summary.zh-cn.png" title="文章摘要预览" data-thumbnail="summary.zh-cn.png" data-sub-html="<h2>文章摘要预览</h2><p>文章摘要预览</p>">
        <img
            class="lazyload"
            src="/svg/loading.min.svg"
            data-src="summary.zh-cn.png"
            data-srcset="summary.zh-cn.png, summary.zh-cn.png 1.5x, summary.zh-cn.png 2x"
            data-sizes="auto"
            alt="summary.zh-cn.png" />
    </a><figcaption class="image-caption">文章摘要预览</figcaption>
    </figure></p>
<h3 id="自动摘要拆分">自动摘要拆分</h3>
<p>默认情况下, Hugo 自动将内容的前 70 个单词作为摘要.</p>
<p>你可以通过在 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中设置 <code>summaryLength</code> 来自定义摘要长度.</p>
<p>如果您要使用 <strong><ruby>CJK<rt>中文/日语/韩语</rt></ruby></strong> 语言创建内容, 并且想使用 Hugo 的自动摘要拆分功能，请在 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中将 <code>hasCJKLanguage</code> 设置为 <code>true</code>.</p>
<h3 id="手动摘要拆分">手动摘要拆分</h3>
<p>另外, 你也可以添加 <code>&lt;!--more--&gt;</code> 摘要分割符来拆分文章生成摘要.</p>
<p>摘要分隔符之前的内容将用作该文章的摘要.</p>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw" aria-hidden="true"></i>注意<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">请小心输入<code>&lt;!--more--&gt;</code> ; 即全部为小写且没有空格.</div>
        </div>
    </div>
<h3 id="前置参数摘要">前置参数摘要</h3>
<p>你可能希望摘要不是文章开头的文字. 在这种情况下, 你可以在文章前置参数的 <code>summary</code> 变量中设置单独的摘要.</p>
<h3 id="使用文章描述作为摘要">使用文章描述作为摘要</h3>
<p>你可能希望将文章前置参数中的 <code>description</code> 变量的内容作为摘要.</p>
<p>你仍然需要在文章开头添加 <code>&lt;!--more--&gt;</code> 摘要分割符. 将摘要分隔符之前的内容保留为空. 然后 <strong>LoveIt</strong> 主题会将你的文章描述作为摘要.</p>
<h3 id="摘要选择的优先级顺序">摘要选择的优先级顺序</h3>
<p>由于可以通过多种方式指定摘要, 因此了解顺序很有用. 如下:</p>
<ol>
<li>如果文章中有 <code>&lt;!--more--&gt;</code> 摘要分隔符, 但分隔符之前没有内容, 则使用描述作为摘要.</li>
<li>如果文章中有 <code>&lt;!--more--&gt;</code> 摘要分隔符, 则将按照手动摘要拆分的方法获得摘要.</li>
<li>如果文章前置参数中有摘要变量, 那么将以该值作为摘要.</li>
<li>按照自动摘要拆分方法.</li>
</ol>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw" aria-hidden="true"></i>注意<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">不建议在摘要内容中包含富文本块元素, 这会导致渲染错误. 例如代码块, 图片, 表格等.</div>
        </div>
    </div>
<h2 id="4-markdown-基本语法">4 Markdown 基本语法</h2>
<p>这部分内容在 <a href="../basic-markdown-syntax/" rel="">Markdown 基本语法页面</a>
 中介绍.</p>
<h2 id="extended-markdown-syntax">5 Markdown 扩展语法</h2>
<p><strong>LoveIt</strong> 主题提供了一些扩展的语法便于你撰写文章.</p>
<h3 id="emoji-支持">Emoji 支持</h3>
<p>这部分内容在 <a href="../emoji-support/" rel="">Emoji 支持页面</a>
 中介绍.</p>
<h3 id="数学公式">数学公式</h3>
<p><strong>LoveIt</strong> 基于 <a href="https://katex.org/" target="_blank" rel="noopener noreffer">$ \KaTeX $</a>
 提供数学公式的支持.</p>
<p>在你的 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中的 <code>[params.math]</code> 下面设置属性 <code>enable = true</code>,
并在文章的前置参数中设置属性 <code>math: true</code>来启用数学公式的自动渲染.</p>
<div class="details admonition tip open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw" aria-hidden="true"></i>技巧<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">有一份 <a href="https://katex.org/docs/supported.html" target="_blank" rel="noopener noreffer">$ \KaTeX $ 中支持的 $ \TeX $ 函数</a>
 清单.</div>
        </div>
    </div>
<h4 id="公式块">公式块</h4>
<p>默认的公式块分割符是 <code>$$</code>/<code>$$</code> 和 <code>\\[</code>/<code>\\]</code>:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">$$ c = \pm\sqrt{a^2 + b^2} $$
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
</span></span></code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<p>$$ c = \pm\sqrt{a^2 + b^2} $$</p>
<p>\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \]</p>
<h4 id="行内公式">行内公式</h4>
<p>默认的行内公式分割符是  <code>$</code>/<code>$</code> 和 <code>\\(</code>/<code>\\)</code>:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">$ c = \pm\sqrt{a^2 + b^2} $ 和 \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)
</span></span></code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<p>$ c = \pm\sqrt{a^2 + b^2} $ 和 \( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \)</p>
<div class="details admonition tip open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw" aria-hidden="true"></i>技巧<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">你可以在 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中自定义公式块和行内公式的分割符.</div>
        </div>
    </div>
<h4 id="copy-tex">Copy-tex</h4>
<p><strong><a href="https://github.com/Khan/KaTeX/tree/master/contrib/copy-tex" target="_blank" rel="noopener noreffer">Copy-tex</a>
</strong> 是一个 <strong>$ \KaTeX $</strong> 的插件.</p>
<p>通过这个扩展, 在选择并复制 $ \KaTeX $ 渲染的公式时, 会将其 $ \LaTeX $ 源代码复制到剪贴板.</p>
<p>在你的 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中的 <code>[params.math]</code> 下面设置属性 <code>copyTex = true</code> 来启用 Copy-tex.</p>
<p>选择并复制上一节中渲染的公式, 可以发现复制的内容为 LaTeX 源代码.</p>
<h4 id="mhchem">mhchem</h4>
<p><strong><a href="https://github.com/Khan/KaTeX/tree/master/contrib/mhchem" target="_blank" rel="noopener noreffer">mhchem</a>
</strong> 是一个 <strong>$ \KaTeX $</strong> 的插件.</p>
<p>通过这个扩展, 你可以在文章中轻松编写漂亮的化学方程式.</p>
<p>在你的 <a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>
 中的 <code>[params.math]</code> 下面设置属性 <code>mhchem = true</code> 来启用 mhchem.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">$$ \ce{CO2 + C -&gt; 2 CO} $$
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">$$ \ce{Hg^2+ -&gt;[I-] HgI2 -&gt;[I-] [Hg^{II}I4]^2-} $$
</span></span></code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<p>$$ \ce{CO2 + C -&gt; 2 CO} $$</p>
<p>$$ \ce{Hg^2+ -&gt;[I-] HgI2 -&gt;[I-] [Hg^{II}I4]^2-} $$</p>
<h3 id="ruby">字符注音或者注释</h3>
<p><strong>LoveIt</strong> 主题支持一种 <strong>字符注音或者注释</strong> Markdown 扩展语法:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">[Hugo]^(一个开源的静态网站生成工具)
</span></span></code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<p><strong><ruby>Hugo<rt>一个开源的静态网站生成工具</rt></ruby></strong></p>
<h3 id="fraction">分数</h3>
<a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.min.svg"
        data-srcset="/svg/version/0.2.0-new.min.svg, /svg/version/0.2.0-new.min.svg 1.5x, /svg/version/0.2.0-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.0"
        title="LoveIt 新增 | 0.2.0" /></a>
<p><strong>LoveIt</strong> 主题支持一种 <strong>分数</strong> Markdown 扩展语法:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">[浅色]/[深色]
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">[99]/[100]
</span></span></code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<p><sup>浅色</sup>/<sub>深色</sub></p>
<p><sup>90</sup>/<sub>100</sub></p>
<h3 id="fontawesome">Font Awesome</h3>
<p><strong>LoveIt</strong> 主题使用 <a href="https://fontawesome.com/" target="_blank" rel="noopener noreffer">Font Awesome</a>
 作为图标库.
你同样可以在文章中轻松使用这些图标.</p>
<p>从 <a href="https://fontawesome.com/icons?d=gallery" target="_blank" rel="noopener noreffer">Font Awesome 网站</a>
 上获取所需的图标 <code>class</code>.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">去露营啦! :(fas fa-campground fa-fw): 很快就回来.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">真开心! :(far fa-grin-tears):
</span></span></code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<p>去露营啦! <i class="fas fa-campground fa-fw" aria-hidden="true"></i>&nbsp;很快就回来.</p>
<p>真开心! <i class="far fa-grin-tears" aria-hidden="true"></i></p>
<h3 id="escape-character">转义字符</h3>
<p>在某些特殊情况下 (编写这个主题文档时 <i class="far fa-grin-squint-tears" aria-hidden="true"></i>),
你的文章内容会与 Markdown 的基本或者扩展语法冲突, 并且无法避免.</p>
<p>转义字符语法可以帮助你渲染出想要的内容:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{?X} -&gt; X
</span></span></code></pre></td></tr></table>
</div>
</div><p>例如, 两个 <code>:</code> 会启用 emoji 语法. 但有时候这不是你想要的结果. 可以像这样使用转义字符语法:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{?:}joy:
</span></span></code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<p><strong>:joy:</strong> 而不是 <strong>:joy:</strong></p>
<div class="details admonition tip open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw" aria-hidden="true"></i>技巧<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">这个方法可以间接解决一个还未解决的 <strong><a href="https://github.com/gohugoio/hugo/issues/4978" target="_blank" rel="noopener noreffer">Hugo 的 issue</a>
</strong>.</div>
        </div>
    </div>
<p>另一个例子是:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">[link{?]}(#escape-character)
</span></span></code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<p><strong>[link](#escape-character)</strong> 而不是 <strong><a href="#escape-character" rel="">link</a>
</strong>.</p></div></div></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.120.4">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw" aria-hidden="true"></i> LoveIt</a>
                </div><div class="footer-line" itemscope itemtype="http://schema.org/CreativeWork"><i class="far fa-copyright fa-fw" aria-hidden="true"></i><span itemprop="copyrightYear">2024</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="https://xzap.gitee.io" target="_blank">xzap</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw" aria-hidden="true"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw" aria-hidden="true"></i>
            </a>
        </div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.4.0/css/lightgallery-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/contrib/copy-tex.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.38.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lunr@2.3.9/lunr.min.js"></script><script type="text/javascript" src="/lib/lunr/lunr.stemmer.support.min.js"></script><script type="text/javascript" src="/lib/lunr/lunr.zh.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.1/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lightgallery@2.4.0/lightgallery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lightgallery@2.4.0/plugins/thumbnail/lg-thumbnail.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lightgallery@2.4.0/plugins/zoom/lg-zoom.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/contrib/auto-render.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/contrib/copy-tex.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/contrib/mhchem.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":50},"comment":{},"lightgallery":true,"math":{"delimiters":[{"display":true,"left":"$$","right":"$$"},{"display":true,"left":"\\[","right":"\\]"},{"display":true,"left":"\\begin{equation}","right":"\\end{equation}"},{"display":true,"left":"\\begin{equation*}","right":"\\end{equation*}"},{"display":true,"left":"\\begin{align}","right":"\\end{align}"},{"display":true,"left":"\\begin{align*}","right":"\\end{align*}"},{"display":true,"left":"\\begin{alignat}","right":"\\end{alignat}"},{"display":true,"left":"\\begin{alignat*}","right":"\\end{alignat*}"},{"display":true,"left":"\\begin{gather}","right":"\\end{gather}"},{"display":true,"left":"\\begin{CD}","right":"\\end{CD}"},{"display":false,"left":"$","right":"$"},{"display":false,"left":"\\(","right":"\\)"}],"strict":false},"search":{"highlightTag":"em","lunrIndexURL":"/index.json","lunrLanguageCode":"zh","lunrSegmentitURL":"/lib/lunr/lunr.segmentit.js","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":50,"type":"lunr"}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
